<template>
  <div class="all">
    <div class="title">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
        <el-button v-if="roles.includes('SystemStoreDelete')" type="danger" icon="el-icon-delete" @click="delBtn">删除</el-button>
        <el-button v-if="roles.includes('SystemStoreUpdate')" type="primary" icon="el-icon-document-checked" @click="submitForm('form')">保存</el-button>
      </div>
    </div>
    <div class="detail-mid">
      <el-form ref="form" v-loaidng="loading" :model="data" :rules="rules" inline>
        <el-row>
          <el-col :span="4">
            <el-form-item label="编号：" prop="coding">
              <el-input v-model="data.coding" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="名称：" prop="name">
              <el-input v-model="data.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态：" prop="status">
              <SelfSelect v-model="data.status" :show-list="costStatus" :clearable="false" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="上级仓库：">
              <Selects v-model="data.parent_id" action="storeList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="种类：" prop="kind">
              <SelfSelect v-model="data.kind" :show-list="storeKind" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="车间：">
              <Selects v-model="data.workshop_id" action="factoryList" :query="{ category: 2 }" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="负责人：">
              <Selects v-model="data.admin_id" action="adminList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="启用日期：">
              <el-date-picker
                v-model="data.start_date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="排序：" prop="sort">
              <el-input v-model="data.sort" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-bottom">
      <el-tabs>
        <el-tab-pane v-if="editId" label="其他负责人">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.other_admin">
              <el-table-column prop="admin" label="员工" align="left" min-width="19%" />
              <el-table-column prop="admin.phone" label="电话1" align="left" min-width="19%" />
              <el-table-column prop="admin.phone2" label="电话2" align="left" min-width="19%" />
              <el-table-column prop="admin.email" label="邮箱" align="left" min-width="23%" />
              <el-table-column v-if="roles.includes('SystemStoreUpdate')" label="操作" fixed="right" min-width="11%" align="center">
                <template scope="{row}">
                  <el-button type="danger" @click="linkDel(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form v-if="roles.includes('SystemStoreUpdate')" ref="providerFrom" style="padding-top: 10px" :model="data" inline>
              <el-row class="input clearables" :gutter="10">
                <el-col :span="5">
                  <el-form-item>
                    <Selects v-model="admin_id" action="adminList" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item>
                    <el-input clearable disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item>
                    <el-input clearable disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item>
                    <el-input clearable disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button icon="el-icon-upload2" @click="linkSubmit" />
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="描述">
          <el-row v-if="editId" :gutter="20" style="padding: 2px">
            <el-col :span="4">
              <div>
                <p>创建时间日期</p>
                <el-input v-model="data.create_time" clearable readonly />
              </div>
              <div>
                <p>创建人</p>
                <el-input v-model="data.create_admin" clearable readonly />
              </div>
              <div v-if="data.update_time">
                <p>最近更新</p>
                <el-input v-model="data.update_time" clearable readonly />
                <p>更新者</p>
                <el-input v-model="data.update_admin" clearable readonly />
              </div>
            </el-col>
            <el-col :span="16">
              <TinyMce v-model="data.content" />
            </el-col>
            <el-col class="upload" :span="4">
              <Adjunct :pk="editId" table="store" />
            </el-col>
          </el-row>
          <el-row v-if="!editId" :gutter="20" style="padding: 2px">
            <el-col :span="24">
              <TinyMce v-model="data.content" />
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/api/system/store'
import SelfSelect from '@/components/select-o'
import Selects from '@/components/select-search'
import TinyMce from '@/components/Tinymce/index'
import Adjunct from '@/components/Upload/adjunct'
import { costStatus, storeKind, eqWeight } from '@/utils/option'
import { mapGetters } from 'vuex'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update'],
  components: {
    SelfSelect,
    TinyMce,
    Selects,
    Adjunct
  },
  data() {
    return {
      data: {
        sort: 100,
        status: 1
      },
      editId: null,
      title: '',
      costStatus,
      storeKind,
      eqWeight,
      admin_id: null,
      loading: true,
      rules: {
        coding: { required: true, message: '请输入编号', trigger: 'change' },
        name: { required: true, message: '请输入名称', trigger: 'change' },
        status: { required: true, message: '请选择状态', trigger: 'change' },
        sort: { required: true, message: '请输入排序', trigger: 'change' },
        kind: { required: true, message: '请选择种类', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '仓库管理详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增仓库管理'
      this.loading = false
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    goBack() {
      this.$router.push('/system/store')
    },
    info() {
      API.getOne(this.editId).then(res => {
        this.data = res.data
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    submitForm() {
      if (this.editId) {
        this.update(API, this.data, this.$refs['form'], '/system/store')
      } else {
        this.add(API, this.data, this.$refs['form'], '/system/store/edit/')
      }
    },
    linkSubmit() {
      const query = {
        store_id: this.editId,
        admin_id: this.admin_id
      }
      API.append(query).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    delBtn() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.editId
        API.delete(id).then(res => {
          if (res.data.error_code !== 1) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success('删除成功')
            this.goBack()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    linkDel(id) {
      API.remove(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.info()
      })
    }
  }
}
</script>

<style scoped>
.input clearables{
  display: flex;
  justify-content: space-between;
  margin: 14px 0 8px;
}
</style>
